<!doctype html>
<html>
  <head>
    <title>Two.js: Interpret Svg&apos;s</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="image_src" href="../images/logo.gif" />
    <link rel="shortcut icon" type="image/gif" href="../images/favicon.gif">
    <script src="../third-party/url.js"></script>
    <script src="../third-party/jquery.js"></script>
    <script src="../third-party/two.js"></script>
    <style>
      #assets {
        display: none;
      }
      body {
        background: rgb(0, 200, 255);
      }
    </style>
  </head>
  <body>
    <div id="assets">

      <!-- Select Prefectures of Japan taken from: http://thenounproject.com/collections/prefectures-of-japan/ -->

      <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
      	<path fill="#000000" d="M66.223,70.505C59.799,88.41,41.477,95.57,26.003,90.408c-0.582-0.194,0,0-1.632-0.901   C5.749,73.91,6.234,44.099,25.316,29.064c0.382-0.301,1.021-0.798,1.021-0.798s0.669,0.379,1.102,0.664   c4.965,3.261,8.977,7.404,12.06,12.484c0.306,0.505,0.692,1.308,0.692,1.308c-8.807,5.498-12.198,17.041-7.722,25.721   c2,3.878,5.055,6.717,8.866,8.81c0.39,0.215,1.264,0.526,1.264,0.526s0.174-0.586,0.404-1.13   c5.613-13.257,4.697-26.029-3.173-38.083c-5.394-8.261-13.084-13.57-22.635-16.137c-0.362-0.097-1.461-0.216-1.073-0.345   c6.843-3.106,16.811-3.367,24.262-2.036l0,0c1.418-5.382,3.583-11.574,6.928-16.111C48.509,2.317,49.971,1,49.971,1   s1.346,1.233,2.612,2.957c3.275,4.459,5.761,10.78,7.123,16.078l0,0c7.154-1.24,18.286-1.324,24.125,2.033   c0,0,0.128-0.021-0.189,0.073c-15.425,4.233-25.773,14.65-29.389,30.152c-1.956,8.387-0.89,16.617,2.686,24.496   c0.093,0.204,0.478,0.868,0.478,0.868C62.427,76.246,66.312,70.254,66.223,70.505z"></path>
      	<path fill="#000000" d="M89.301,59.21c0.039,20.571-15.352,37.589-35.302,39.581c-8.286,0.828-16.037-0.812-23.302-4.839   c-0.352-0.193-1.233-0.776-1.556-1.023c0.382,0.012,1.354,0.277,1.73,0.333c6.828,0.99,13.415,0.137,19.572-2.982   c11.294-5.719,17.443-14.984,18.854-27.568c0.936-8.344-2.181-14.675-8.865-19.45c-0.815-0.627-0.815-0.627-0.815-0.627   s0,0,0.51-0.779c3.179-5.433,7.938-10.159,13.308-13.448c0.128-0.078,0,0,0,0c8.249,5.583,13.633,15.002,15.347,25.061   c0.131,0.766,0.232,1.537,0.295,2.311C89.184,57.087,89.25,58.398,89.301,59.21z"></path>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
        <path id="Chiba" d="M65.511,48.22l28.453-25.117l-0.238,0.078l0.045-0.04L57.282,34.976l-2.375-8.954l6.145-9.104L50.018,1.609   l-10.973,15.31l6.145,9.103l-2.384,8.986L9.728,24.28l-3.702-1.219L34.809,48.12L6.277,73.558l36.36-12.054l7.354,36.887   l8.097-36.854l35.886,12.062L65.511,48.22z M16.417,67.696L36.612,49.69l4.44,3.866l1.117,5.603L16.417,67.696z M57.782,51.876   l-1.444,6.569l-0.256,1.165l-0.255,1.166L50.104,86.82l-5.197-26.068l-0.233-1.173l-0.233-1.172l-1.219-6.109l-3.264-2.843   l-1.351-1.175l-1.35-1.175L16.384,28.934l28.073,9.104l3.303-12.451l-5.824-8.628l8.088-11.284l8.136,11.287l-5.822,8.625   l3.295,12.418l28.04-9.094l-0.117,0.104l0.201-0.066L63.185,47.107l-1.332,1.177l-1.332,1.175L57.782,51.876z M59.934,53.143   l3.784-3.342l20.027,17.855l-25.144-8.451L59.934,53.143z"></path>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M38.106,72.518c3.441-1.11,6.966-1.844,10.583-2.313   c0.229,0.651,0.109,1.256,0.124,1.847c0.015,0.605,0.018,1.215-0.04,1.816c-0.19,1.991-0.302,3.998-0.639,5.967   c-0.744,4.343-2.271,8.371-5.22,11.75c-3.055,3.499-6.852,5.614-11.488,6.198c-4.453,0.56-8.488-0.47-12.034-3.212   c-3.315-2.562-5.277-5.998-5.961-10.104c-1.035-6.219,0.854-11.556,5.141-16.097c2.504-2.652,5.533-4.562,8.833-6.045   c4.732-2.129,9.677-3.605,14.772-4.56c2.224-0.418,4.468-0.728,6.705-1.069c0.325-0.049,0.663-0.007,0.971-0.007   c-0.412,3.58-0.82,7.125-1.242,10.794c-0.87,0.149-1.825,0.315-2.78,0.478c-3.988,0.677-7.897,1.642-11.65,3.184   c-2.384,0.98-4.67,2.138-6.743,3.679c-1.683,1.251-2.958,2.814-3.441,4.907c-0.312,1.351-0.271,2.693,0.226,4.01   c1.157,3.06,4.232,4.176,7.162,3.225c2.472-0.802,4.045-2.562,4.962-4.942c0.736-1.909,1.168-3.897,1.398-5.93   C37.875,74.934,37.98,73.77,38.106,72.518z"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M62.965,58.975c-0.192,1.398-0.379,2.702-0.551,4.01   c-0.135,1.011-0.3,2.021-0.361,3.036c-0.109,1.812-0.256,3.631-0.2,5.44c0.104,3.401,0.453,6.781,1.561,10.036   c0.665,1.955,1.753,3.604,3.536,4.706c1.531,0.947,3.175,1.342,4.983,0.907c2.301-0.553,3.983-2.512,4.192-4.905   c0.275-3.14-1.108-5.477-3.512-7.309c-2.088-1.591-4.403-2.777-6.833-3.751c-0.415-0.167-0.821-0.352-1.194-0.512   c-0.29-1.86,0.454-8.613,1.043-10.838c0.275,0.07,0.555,0.13,0.826,0.215c3.863,1.227,7.604,2.727,10.975,5.026   c3.443,2.348,6.278,5.259,7.877,9.158c2.614,6.376,2.026,12.446-2.252,17.942c-2.549,3.273-6.033,5.041-10.148,5.628   c-7.404,1.056-14.775-3.003-18.383-9.85c-1.367-2.597-2.23-5.352-2.729-8.236c-0.646-3.748-0.762-7.525-0.6-11.309   c0.2-4.646,0.743-9.256,1.846-13.92c1.632,0.802,3.217,1.625,4.842,2.365C59.527,57.566,61.208,58.232,62.965,58.975z"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M48.125,50.75c-0.878-1.649-1.693-3.257-2.578-4.824   c-0.873-1.545-1.817-3.051-2.785-4.665c0.278-0.283,0.58-0.603,0.893-0.911c2.625-2.575,5.061-5.315,7.188-8.318   c1.973-2.783,3.638-5.735,4.719-8.99c0.648-1.952,0.806-3.913,0.097-5.885c-0.586-1.63-1.63-2.881-3.161-3.707   c-2.104-1.133-4.115-0.85-5.925,0.586c-2.32,1.837-3.051,4.341-2.591,7.191c0.409,2.528,1.531,4.803,2.758,7.02   c0.494,0.893,1.039,1.756,1.616,2.725c-2.128,2.926-4.607,5.593-7.284,8.141c-2.736-3.705-5.167-7.465-6.635-11.775   c-0.95-2.786-1.421-5.642-1.237-8.579c0.49-7.833,5.782-14.625,13.55-16.315c4.826-1.05,9.225,0.14,13.12,3.122   c3.642,2.786,5.794,6.53,6.64,11c0.642,3.404,0.278,6.769-0.746,10.07c-1.211,3.906-3.226,7.392-5.565,10.707   c-3.372,4.779-7.231,9.127-11.596,13.022C48.464,50.486,48.316,50.595,48.125,50.75z"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M52.01,50.829c2.464-2.673,4.893-5.307,7.379-8.004   c1.062,0.527,2.193,1.111,3.347,1.656c3.312,1.565,6.703,2.917,10.27,3.807c2.207,0.55,4.44,0.889,6.699,1.036   c1.947,0.125,3.846-0.134,5.589-1.11c1.326-0.743,2.373-1.768,2.989-3.157c1.365-3.08,0.398-5.954-2.58-7.48   c-2.313-1.187-4.689-1.011-6.962,0.184c-2.271,1.193-4.117,2.932-5.839,4.805c-0.688,0.748-1.35,1.522-2.074,2.344   c-3.451-1.122-6.724-2.616-10.031-4.395c0.913-1.198,1.755-2.349,2.644-3.46c2.353-2.94,4.982-5.591,8.188-7.613   c3.817-2.407,7.965-3.64,12.494-3.214c7.115,0.669,13.399,5.471,15.032,12.605c1.065,4.651,0.139,9.014-2.501,12.971   c-2.799,4.196-6.765,6.71-11.665,7.782c-3.408,0.745-6.833,0.669-10.247,0.08c-5.88-1.015-11.419-3.074-16.784-5.622   c-1.806-0.858-3.545-1.855-5.31-2.794C52.423,51.131,52.222,50.97,52.01,50.829z"></path>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M28.118,47.992c2.128,2.974,3.892,6.085,5.511,9.4   c-0.314,0.13-0.601,0.27-0.901,0.369c-3.015,0.99-6.073,1.833-9.233,2.163c-5.593,0.583-10.945-0.065-15.667-3.467   C3.651,53.451,1.1,49.388,0.531,44.293c-0.691-6.185,1.655-11.184,6.673-14.849c3.7-2.703,7.927-3.681,12.443-3.177   c4.201,0.469,7.865,2.285,11.139,4.922c2.971,2.393,5.41,5.271,7.648,8.334c3.263,4.47,6.025,9.228,8.237,14.303   c0.058,0.132,0.1,0.271,0.197,0.536c-1.828,0.313-3.604,0.574-5.362,0.931c-1.766,0.357-3.513,0.809-5.298,1.227   c-0.716-1.354-1.396-2.698-2.13-4.016c-2.309-4.145-4.956-8.045-8.388-11.36c-1.225-1.184-2.517-2.294-3.998-3.152   c-2.177-1.26-4.47-1.585-6.852-0.674c-1.665,0.636-2.915,1.765-3.483,3.49c-0.609,1.851-0.22,3.601,0.857,5.171   c1.264,1.845,3.079,2.842,5.274,3.179c3.131,0.482,6.162-0.153,9.193-0.804C27.124,48.261,27.559,48.134,28.118,47.992z"></path>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
        <path fill="#000000" d="M38.346,7.361c5.948,0,11.682,0,17.704,0c-0.424,0.686-0.701,1.152-0.995,1.607   c-1.271,1.973-1.435,4.027-0.356,6.116c1.112,2.155,2.675,3.638,5.16,4.387c14.231,4.29,23.356,13.652,26.608,28.191   c4.451,19.9-8.217,39.671-28.357,44.094c-20.055,4.403-39.957-8.062-44.395-28.746c-3.797-17.7,5.817-35.062,21.87-41.897   c0.652-0.278,1.333-0.488,1.979-0.721c1.373,1.874,2.595,3.726,4.008,5.419c1.409,1.689,3.01,3.218,4.599,4.894   c-0.455,0.143-0.869,0.319-1.302,0.403c-9.437,1.842-17.414,9.238-19.403,19.651c-2.522,13.202,6.146,26.416,20.045,28.851   c13.799,2.419,26.091-7.008,28.472-19.832c2.342-12.618-5.419-24.349-16.484-27.902c-3.17-1.019-6.152-2.364-8.953-4.226   c-5.195-3.453-8.174-8.28-9.457-14.265C38.668,11.429,38.192,9.465,38.346,7.361z"></path>
        <path fill="#000000" d="M85.639,73.526c3.175,4.685,7.525,7.233,13.484,7.038c-1.695,4.46-4.299,8.132-7.251,11.737   c-5.388-1.372-9.899-4.129-13.729-8.076c0,0,2.002-2.354,3.961-4.9C83.798,77.121,85.639,73.526,85.639,73.526z"></path>
        <path fill="#000000" d="M7.479,91.52C5.29,87.803,3.16,84.188,0.877,80.312c5.979-0.04,10.307-2.569,13.372-7.684   c1.639,4.083,4.077,7.455,7.002,10.582C17.495,87.44,13.454,90.855,7.479,91.52z"></path>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
      	<path id="Kanagawa" d="M78.156,72.524V59.48c9.052-4.537,15.284-13.902,15.284-24.698c0-13.58-9.855-24.893-22.787-27.184V2h-8.047   v5.361c-4.664,0.544-8.977,2.257-12.64,4.835c-3.45-2.429-7.476-4.094-11.833-4.733V2h-8.044v5.463   C16.762,9.418,6.497,20.921,6.497,34.782c0,10.822,6.261,20.204,15.347,24.731v13.011c0,12.97-8.981,16.649-16.516,17.453   l0.853,7.999c14.091-1.502,22.786-10.153,23.633-23.307h0.074V62.075V53.89V26.336h-8.044v23.679   c-4.449-3.59-7.303-9.084-7.303-15.232c0-10.791,8.779-19.57,19.571-19.57c3.604,0,6.981,0.984,9.884,2.69   C40.818,22,38.764,27.01,38.308,32.47h-0.035v0.549c-0.037,0.583-0.062,1.171-0.062,1.763c0,0.593,0.025,1.18,0.062,1.764v17.353   v8.179v19.428c0,0-0.206,9.255,3.193,12.844C42.986,95.952,45.578,98,50,98c3.258,0,6.062-1.188,8.107-3.433   c4.029-4.423,3.732-11.498,3.62-12.989V62.086v-8.172V34.782V32.47H61.63C61.173,27.01,59.12,22,55.942,17.901   c2.902-1.706,6.279-2.689,9.884-2.689c10.791,0,19.569,8.78,19.569,19.57c0,6.121-2.826,11.592-7.239,15.184v-23.63h-8.045v27.539   v8.188V74.67h0.073c0.848,13.153,9.543,21.805,23.634,23.307l0.854-7.999C87.136,89.174,78.156,85.494,78.156,72.524z    M52.159,89.149c-0.362,0.399-0.902,0.807-2.16,0.807c-1.493,0-2.1-0.475-2.463-0.887c-1.326-1.508-1.219-6.522-1.219-6.522V59.539   V36.324v-3.083c0.289-3.681,1.601-7.078,3.651-9.908c2.333,3.222,3.712,7.176,3.712,11.449v24.785v22.979   C53.681,82.547,53.527,87.648,52.159,89.149z"></path>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
        <path d="M92.089,73.322c-0.506-1.879-0.989-3.664-1.452-5.381l-0.129-0.479L73.611,57.7c0.824-2.556,1.228-5.095,1.229-7.728    c0.002-2.515-0.409-5.094-1.228-7.679l16.9-9.766l1.883-7.017l-7.013-1.88l-16.926,9.766c-1.772-1.959-3.763-3.571-6.054-4.909    c-2.172-1.269-4.555-2.187-7.252-2.794V6.505l-5.241-5.201L44.82,6.366v19.34c-2.574,0.555-5.015,1.496-7.271,2.803    c-2.191,1.271-4.211,2.911-6.021,4.883l-16.921-9.766l-7.01,1.895l1.895,7.01l16.897,9.767    c-1.622,5.099-1.624,10.271-0.004,15.405L9.486,67.469L7.604,74.49l7.013,1.877l16.917-9.764    c3.616,3.951,8.087,6.537,13.315,7.703v19.155l5.236,5.233l5.099-5.062V74.295c5.205-1.158,9.668-3.738,13.289-7.689l16.922,9.766    l7.008-1.893L92.089,73.322z M64.574,50.027c-0.012,8-6.545,14.513-14.562,14.513h-0.04c-8.031-0.022-14.556-6.56-14.546-14.571    c0.012-8.001,6.546-14.51,14.565-14.51h0.036C58.061,35.479,64.586,42.014,64.574,50.027z"></path>
        <path d="M50.014,40.942h-0.071c-2.447,0.02-4.73,0.981-6.43,2.712c-1.696,1.724-2.617,4.017-2.594,6.454    c0.046,4.933,4.114,8.947,9.066,8.947h0.07c2.443-0.018,4.727-0.984,6.431-2.718c1.697-1.729,2.619-4.019,2.596-6.451    C59.031,44.954,54.964,40.942,50.014,40.942z"></path>
      </svg>

    </div>
    <div class="scripts">
      <script>

        $(function() {

          var type = /(canvas|webgl)/.test(url.type) ? url.type : 'svg';
          var two = new Two({
            type: Two.Types[type],
            fullscreen: true,
            autostart: true
          }).appendTo(document.body);

          var dimensions = 140;
          var shapes = [];
          var index = 0;
          var length = 0;
          var scale = two.width > two.height ? two.height / dimensions : two.width / dimensions;
          var easing = 0.125;

          $('#assets svg').each(function(i, el) {

            var shape = two.interpret(el).center();
            shape.fill = 'white';
            shape.visible = false;
            shape.noStroke();
            shape.translation.set(two.width / 2, two.height / 2);
            shapes.push(shape);
            for (var i = 0; i < shape.children.length; i++) {
              for (var j = 0; j < shape.children[i].vertices.length; j++) {
                var v = shape.children[i].vertices[j];
                v.ox = v.x;
                v.oy = v.y;
              }
            }

          });

          length = shapes.length;

          two.bind('update', function() {

            var shape = shapes[index];
            shape.visible = true;
            shape.scale += (scale - shape.scale) * easing;

            for (var i = 0; i < shape.children.length; i++) {
              for (var j = 0; j < shape.children[i].vertices.length; j++) {
                var v = shape.children[i].vertices[j];
                var x = v.ox + Math.random();
                var y = v.oy + Math.random();
                v.set(x, y);
              }
            }

            if (shape.scale >= (scale - 0.001)) {
              shape.visible = false;
              shape.scale = 0;
              index = (index + 1) % length;
            }

          });

        });

      </script>
    </div>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-40550435-1', 'github.com');
      ga('send', 'pageview');

    </script>
  </body>
</html>